<template>
  <div class="page has-navbar" v-nav="{title: '检测及估值', showBackButton: true}">
    <div class="page-content padding-top">
      <form @submit.prevent="save" >
        <div class="check-new-box">
          <div class="check-new-left">
            <item class="y-item">
              <span class="item-title"><span class="red">*</span>估值</span>
              <input type="text" class="y-item-input" name="detectionPrice" v-model="checkInfo.detectionPrice" placeholder="请输入估值" required>
              <span class="y-item-note">万元</span>
            </item>
            <item class="y-item">
              <span class="item-title"><span class="red">*</span>检测报告</span>
              <span style=" color:#aaa;">{{checkInfo.imgTitle || '请上传检测报告'}}</span>
              <span class="y-item-note"><img src="static/images/ic_upload_img.svg" class="ic_upload_img" alt=""></span>
              <input type="file" accept="image/*" class="check-img" name="uploadFile" @change="checkImg($event)" placeholder="上传检测报告" required>
            </item>
          </div>
          <div class="check-new-right" v-if="updateImg" >
            <img :src="updateImg" >
          </div>
        </div>
        <item class="y-item">
          <span class="item-title">检测结果</span>
          <input type="text" class="y-item-input" name="detectionResult" placeholder="请输入检测结果">
        </item>
        <item class="y-item">
          <span class="item-title">检测备注</span>
          <textarea class="checkd-textarea" cols="30" name="detectionRemark" rows="10" placeholder="请输入检测备注" ></textarea>
        </item>
        <div class="outbtn"  style="margin-top:50px;" ><button type="submit" class="button button-assertive button-block" >保存</button></div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      checkInfo:{
        carId:this.$route.query.carId,
        detectionId:this.$route.params.id,
        detectionPrice:'',
        imgTitle:'',
        uploadFile:null,
      },
      updateImg:'',
    }
  },
  created(){
    var _this = this;
    
  },
  methods:{
    checkImg(e){
      var pic = e.target.files[0];
      this.updateImg = window.URL.createObjectURL(pic)
      this.checkInfo.uploadFile = pic;
      this.checkInfo.imgTitle = pic.name;
    },
    save(event) {
      var _this = this;
      var fd = new FormData(event.target);
      fd.append('carId', _this.checkInfo.carId);
      fd.append('detectionId', _this.checkInfo.detectionId);
      fd.append('detectUserId', sess.get('userSession').userId)
      

      axios.post(baseUrl+'/controller/app/uploadResult',fd)
      .then(function(res){
        setTimeout(() => {
          window.$toast.show('保存成功')
        }, 400)
        setTimeout(() => {
          $router.back('/check')
        }, 1000)
      })

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.checkd-textarea{
  padding: 10px; display: inline-block;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 1px solid #eee;
}
.check-img{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
}
.ic_upload_img{
  width: 25px;
  vertical-align: middle;
}
.check-new-box {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  display: flex;
  width: 100%;
}
.check-new-left{
  flex: 1;
}
.check-new-right {
  height: 100px;
  width: auto;
}
.check-new-right img { height: 100%; width: auto;}
</style>
